<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>jQuery Maximum Input Plugin</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
        <style>
            body{
                background: #b5e026 url(bg.png) repeat-x top left;
                font-family: arial;
                padding:0px;
                margin:0px;
            }
            .header{
                position:absolute;
                top:0px;
                left:0px;
                background:#555 url(header.png) no-repeat top left;
                width:100%;
                height:90px;
                border-top:2px solid #000;
                border-bottom:2px solid #ccc;
            }
            .footer{
                width:100%;
                margin:10px 0px 5px 0px;
            }
            a img{
                border:none;
                outline:none;
            }
            .content{
                margin-top:100px;
                padding:0px;
                bottom:0px;
            }
            .about{
                width:100%;
                height:200px;
                background:transparent url(about.png) repeat-x top left;
                border-top:2px solid #ccc;
                border-bottom:2px solid #000;
            }
            .about .text{
                width:20%;
                margin:5px 2% 10px 2%;
                height:180px;
                float:left;
                color:#FCFEF3;
                font-weight:bold;
                font-size: 11px;
                text-align:justify;
            }
            .about .text h1{
                border-bottom: 1px dashed #ccc;
				color:#fff;
            }
            .demo{
                width:800px;
                height:220px;
                padding-top:10px;
                margin:0 auto;
                border-bottom: 3px solid #ABDC28;
            }
            .demo h1{
                color:#fff;
                float:left;
                margin:5px 30px 0px 0px;
            }
        </style>
    </head>
    <body>
        <div class="header">

        </div>
        <div class="content">
            <div class="demo">
                <h1>Demo 1</h1>
                <div id="demo1" class="jMax">
                </div>
            </div>
            <div class="demo">
                <h1>Demo 2</h1>
                <div id="demo2" class="jMax">
                </div>
            </div>
            <div class="demo">
                <h1>Demo 3</h1>
                <div id="demo3" class="jMax">
                </div>
            </div>
            <div class="demo">
                <h1>Demo 4</h1>
                <div id="demo4" class="jMax">
                </div>
            </div>
            <div class="about">
                <div class="text">
                    <h1>Demo 1</h1>
                    <p>Demo 1 shows the default message of the maximal number of input characters in the top left corner.</p>                    
                </div>
                <div class="text">
                    <h1>Demo 2</h1>
                    <p>Here just the number of characters are shown that are left to type. The position of the number is bottom left.</p>
                </div>
                <div class="text">
                    <h1>Demo 3</h1>
                    <p>The position of the number is top right.</p>
                   
                </div>
                <div class="text">
                    <h1>Demo 4</h1>
                    <p>Demo 4 shows a customized message. The message show can be adapted. The default message is shown in Demo 1.</p>
                </div>
            </div>

        </div>
        <div class="footer"><a href="http://www.tympanus.net/codrops/"><img src="codrops_back.png" alt="Back to Codrops"/></a></div>
		<script type="text/javascript" src="jquery-1.3.2.js"></script>
		<script src="jquery.MaxInput.js" type="text/javascript"></script>
		<script type="text/javascript">
		$(function() {
			$("#demo1").maxinput({
				position	: 'topleft',
				showtext 	: true,
				limit		: 130
			});
			
			$("#demo2").maxinput({
				position	: 'bottomleft',
				limit		: 10
			});
			
			$("#demo3").maxinput({
				limit		: 20
			});
			
			$("#demo4").maxinput({
				limit		: 5,
				showtext 	: true,
				message		: 'left'	
			});
		});
		</script>
    </body>
</html>

